<template>
  <div class="container">
    <!-- 任何组件只能有唯一的一个根节点 -->
    <h1>{{ msg }}</h1>
    <Header></Header>
    <Main></Main>
    <Footer/>
  </div>
</template>


<script>
//书写JS地方
//需要对外暴露一个配置对象,VM学习过全部配置项都可以在这里书写
//es6引入语法：JS语法，在script标签内部引入子组件
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
export default {
  name: "App",
  //函数：组件的响应式数据为函数
  data() {
    return {
      msg: "我是根组件",
    };
  },
  //注册局部组件
  components:{
    Header,
    Main,
    Footer
  }
};
</script>

<style>
/* 书写样式的地方*/
.container {
  width: 1000px;
  height: 400px;
  background: red;
}
</style>